import React, { Component } from 'react'

export default class App extends Component {
    state = {
        username:'atguigu',
        pwd:'123123'
    }
    // 创建两个新的属性
    usernameRef = React.createRef()
    pwdRef = React.createRef()

    submitHandler(e){
        e.preventDefault();
        console.log('username: ', this.usernameRef.current.value);
        console.log('pwd: ', this.pwdRef.current.value);
    }
    render() {
        /**
         * 非受控组件：
         * 表单元素的值，不受到状态数据的控制。
         * 赋值的是defaultValue属性
         * 
         * 如何获取用户最新的输入？ 通过ref实现
         * 
         */
        let {username, pwd} = this.state;
        return (
            <div>
                <h3>非受控组件</h3>
                <form action="" onSubmit={this.submitHandler.bind(this)}>
                    用户名: <input type="text" name="username" ref={this.usernameRef} defaultValue={username}/><br />
                    密码： <input type="text" name="pwd" ref={this.pwdRef} defaultValue={pwd}/><br />
                    <button>保存</button>
                </form>
            </div>
        )
    }
}
